{% extends 'user_base.html' %}
{% load static %}
{% block style %}
    <link type="text/css" rel="stylesheet" href=" {% static 'plugins/bootstrap-fileinput/css/fileinput.min.css' %}">
{% endblock %}
{% block content %}
    <div class="container-fluid" style="margin-top: 50px;width: 50%">
        <div class="container-fluid">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <h1 class="card-title">文件上传</h1>

                    <hr>
                    <input id="input-id" name="file-data" type="file" multiple="multiple">
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">历史使用</div>

            <!-- Table -->
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>订单号</th>
                    <th>分析数量</th>
                    <th>金额</th>

                </tr>
                </thead>
                <tbody>
                {% for obj in queryset %}
                    <tr>
                        <td>{{ obj.oid }}</td>
                        <td>{{ obj.number }}</td>
                        <td>{{ obj.price }}</td>

                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    {{ page_string }}
                </ul>
            </nav>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.bundle.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap-3.4.1-dist/js/bootstrap.bundle.min.js.map' %}"></script>
    <script src="{% static 'plugins/bootstrap-fileinput/js/fileinput.min.js' %}"></script>

    <script>
        $(document).ready(function () {
            //设置fileinput属性
            $("#input-id").fileinput({
                language: 'zh',     //设置语言
                dropZoneEnabled: true,      //是否显示拖拽区域
                dropZoneTitle: "将图片拖放到这里",    //拖拽区域显示文字
                uploadUrl: 'servlet/',  //后端接口
                theme: 'fa5',
                allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],      //指定上传文件类型
                uploadAsync: true,                                         // 默认异步上传
                showUpload: true,                                          // 显示上传按钮
                showRemove: true,                                          // 显示移除按钮
                showPreview: true,                                         // 显示预览
                showCaption: false,                                        // 不显示标题
                browseClass: "btn btn-primary",                            // 按钮样式
                maxFileSize: 2048,                                         //上传文件最大值，单位kb
                maxFileCount: 100,                                           // 允许同时上传的最大文件个数
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
            }).on("fileuploaded", function (event, data) { //上传成功后回调
                console.log(data);
                console.log(window.location.href)
                window.location = window.location.href + "result/";

            }).on("fileuploaderror", function (event, data, msg) {
                console.log("文件上传失败：" + msg);
            });
        });

        function downloadImages(images) {
            // 遍历每个图像
            for (var i = 0; i < images.length; i++) {
                var image = images[i];
                var imageData = image.image;
                var fileName = image.filename;

                // 创建链接元素
                var link = document.createElement('a');
                link.href = 'data:image/jpeg;base64,' + imageData;
                link.download = fileName;

                // 模拟点击链接以触发下载
                link.dispatchEvent(new MouseEvent('click'));
            }
        }

        // 监听从后端发送的消息
        window.addEventListener('message', function (event) {
            var data = event.data;
            if (data.status === 200) {
                var results = data.data.results;
                downloadImages(results);
            } else {
                console.error('请求发生错误:', data.msg);
            }
        });

        // 使用 Fetch API 请求后端数据
        fetch('/user/function/servlet/')
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                if (data.status === 200) {
                    window.postMessage(data, '*');
                } else {
                    console.error('请求发生错误:', data.msg);
                }
            })
            .catch(function (error) {
                console.error('请求发生错误:', error);
            });

    </script>
{% endblock %}